<template>
  <a-modal v-model:visible="visible" :maskClosable="false" :title="title">
    <a-form
      ref="formRef"
      :model="form"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-item
        label="文件夹名称"
        name="folderName"
        :rules="[{ required: true, message: '请填写文件夹名称' }]"
      >
        <a-input v-model:value="form.folderName" :maxlength="16" />
      </a-form-item>
      <a-form-item label="排序" name="sort">
        <a-input-number v-model:value="form.sort" :min="1" :precision="0" />
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button @click="cancel" :loading="loading">取消</a-button>
      <a-button type="primary" :loading="loading" @click="submit(false)"
        >确定</a-button
      >
      <a-button
        type="primary"
        v-if="type === 'add'"
        :loading="loading"
        @click="submit(true)"
        >保存并继续</a-button
      >
    </template>
  </a-modal>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, Ref, toRefs } from "vue";
import type { FormInstance } from "ant-design-vue";
import resourceApis from "@/apis/resource";
import { useStore } from "@/store";
export default defineComponent({
  name: "OwnFolderEditForm",
  setup(props, { emit }) {
    const formRef = ref<FormInstance>();
    const store = useStore();
    const state = reactive({
      form: {
        companyId: store.state.user.company.id,
        folderName: "",
        type: 1,
        sort: undefined,
        id: "",
      },
      visible: false as boolean,
      needUpdate: false as boolean,
      folderType: 1,
      type: "add",
      title: "",
      loading: false as boolean,
    });

    const open = (type: "add" | "edit", folderType, data: any = {}) => {
      state.type = type;
      state.visible = true;
      state.needUpdate = false;
      state.folderType = folderType;
      state.title = type === "add" ? "新增文件夹" : "编辑文件夹";
      if (type === "add") {
        state.form = {
          companyId: store.state.user.company.id,
          folderName: "",
          type: folderType,
          sort: undefined,
          id: "",
        };
      } else {
        state.form = {
          companyId: data.companyId,
          folderName: data.folderName,
          type: data.type,
          sort: data.sort,
          id: data.id,
        };
      }
      console.log(data);
    };

    const submit = async (_continue: boolean = false) => {
      try {
        const values = await formRef.value?.validateFields();
        console.log(values, state.form);
        if (state.type === "add") {
          const res: any = await resourceApis.createFolder(state.form);
          if (res.code === 0) {
            state.needUpdate = true;
            if (_continue) {
              state.form = {
                companyId: store.state.user.company.id,
                folderName: "",
                type: state.folderType,
                sort: undefined,
                id: "",
              };
              formRef.value?.resetFields();
            } else {
              cancel();
            }
          }
        }
        if (state.type === "edit") {
          const res: any = await resourceApis.editFolder(state.form);
          if (res.code === 0) {
            state.needUpdate = true;
            formRef.value?.resetFields();
            cancel();
          }
        }
      } catch (err) {}
    };

    const cancel = () => {
      if (state.needUpdate) {
        emit("submit");
      }
      state.visible = false;
    };
    return {
      formRef,
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      open,
      submit,
      cancel,
      ...toRefs(state),
    };
  },
});
</script>